<template>
  <div>
    <!--        顶部按钮区域-->
    <div>
      <el-button size="small" type="primary" @click="handleAdd">新增</el-button>
    </div>
    <!--      列表区域-->
    <div style="margin-top:2px">
      <el-table
          :data="page.data"
          style="width: 100%"
          size="small"
          row-key="id"
          border>
        <el-table-column
            label="序号"
            type="index"
            align="center"
            width="50">
        </el-table-column>
        <el-table-column v-for="(item,index) in columns" :key="index"
                         :prop="item.prop"
                         :label="item.label"
                         align="center"
                         :width="item.prop=='img'?item.width:null"
        >
          <template slot-scope="scope">
            <span v-if="scope.column.property=='gender'">
                  <span>{{scope.row.gender=='0'?'男':'女'}}</span>
            </span>
            <span v-else-if="scope.column.property=='img'">
                  <el-image
                      style="width: 40px; height: 40px"
                      :src="scope.row.img"
                      fit="scale-down">
                    <div slot="error" class="image-slot">
                      <i class="el-icon-picture-outline"></i>
                    </div>
                  </el-image>
            </span>
            <span v-else>{{scope.row[scope.column.property]}}</span>
          </template>
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
            align="center"
            width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination

          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="page.pageNum"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="page.pageSize"
          layout="total,sizes, prev, pager, next"
          :total="page.total">
      </el-pagination>
    </div>
    <!--      表单区域-->
    <el-dialog title="用户信息" :visible.sync="dialogFormVisible" :close-on-click-modal="false" >
      <el-form :model="formData" size="small" label-width="80px" style="height: 385px;">
        <el-form-item label="账号">
          <el-input v-model="formData.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="formData.nickname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="formData.gender">
            <el-radio :label="0">男</el-radio>
            <el-radio :label="1">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="年龄">
          <el-inputNumber v-model="formData.age" autocomplete="off"></el-inputNumber>
        </el-form-item>
        <el-form-item label="手机">
          <el-input v-model="formData.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="formData.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="部门">
          <el-input></el-input>
        </el-form-item>
        <el-form-item label="角色">
          <el-input ></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogFormVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="toSave">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {Message} from "element-ui";
import {page,save,deleteById} from '@/api/user';
export default {
  name: 'UserIndex',
  data() {
    return {
      columns: [
        {
          prop: 'img',
          label: '头像',
          width: 70,
        },
        {
          prop: 'nickname',
          label: '用户名',
          width: 200,
        },            {
          prop: 'username',
          label: '账号',
          width: 180,
        },{
          prop: 'gender',
          label: '性别',
          width: 180,
        },{
          prop: 'age',
          label: '年龄',
          width: 180,
        },{
          prop: 'phone',
          label: '手机',
          width: 180,
        },{
          prop: 'email',
          label: '邮箱',
          width: 200,
        },
      ],
      page: { //分页查询对象
        pageNum: 1,
        pageSize: 10,
        total: 0,
        data: []
      },

      dialogFormVisible: false, //是否显示表单弹框，默认false
      formData:{}, //表单数据
      parentSelectShow: false, //是否显示父级节点选择菜单
      popoverShow: false, //是否显示图标选择器
      iconList: [], //图标合集
      treeData: [{menuName:'无',children:[]}], //父节点树形选择器数据
    }
  },
  methods: {
    handleSizeChange(pageSize){
      this.page.pageSize = pageSize;
      this.initTableData();
    },
    handleCurrentChange(pageNum){
      this.page.pageNum = pageNum;
      this.initTableData();
    },
    handleAdd(){
      this.formData = {gender:0};
      this.dialogFormVisible = true;
    },
    /** 编辑 **/
    handleEdit(row){
      this.formData = row;
      this.formData.type = row.type+'';
      this.dialogFormVisible = true;
    },
    /** 删除 **/
    handleDelete(row){
      deleteById(row.id).then(res=>{
        console.log(res);
        if(res.success){
          Message.success(res.data);
          this.initTableData();
        }
      })
    },
    /** 保存表单数据**/
    toSave(){
      save(this.formData).then(res=>{
        if(res.success){
          Message.success("保存成功");
          this.dialogFormVisible = false;
          this.initTableData();
        }
      })
    },
    initTableData(){
      let param = {
        pageNum: this.page.pageNum,
        pageSize: this.page.pageSize
      };
      page(param).then(res=>{
        this.page = res.data;
      });
    }
  },
  mounted() {
    this.initTableData();
  }
}
</script>

<style scoped>

/**滚动条宽度*/
::-webkit-scrollbar {
  width:8px;
}
/**内部滚动条*/
::-webkit-scrollbar-thumb{
  border-radius:10px;
  -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);
  background-color:#ddd;
}
</style>